<template>
	<view class="shop_dea" v-if="info">
		
		 <imgsBanner-tag :imgList='imgList' autoplay duration='500' interval="5000" :isShowSmallImgs='true' customizeDisplayField='url' @change=''></imgsBanner-tag>
		
		<view style="width: 94%;margin-left: 3%;background: #fff;border-radius: 0.5em;margin-top: 20rpx;">
			<view style="width: 92%;padding-top: 30rpx;margin-left: 4%;">
				<view style="width: 100%;">
					<view style="font-weight: 700;">
					<span style="font-size: 38rpx;">价值：{{info.money}}</span>
					</view>
				</view>	
				<view style="width: 100%;font-weight: 550;margin-top: 10rpx;font-size: 30rpx;">
					{{info.title}}
					<br>
					{{info.desc}}
					
				</view>
				<view style="width: 100%;margin-top: 20rpx;padding-bottom: 30rpx;font-size: 26rpx;color: #999;">
					免运费
				</view>
				
			</view>
			
			
		</view>

		
		<view style="width: 100%;color: #999;text-align: center;font-size:26rpx;padding-top:30rpx;padding-bottom:30rpx;">
			宝贝详情
		</view>
		 <rich-text :nodes="info.content"></rich-text>
		 
		 <view v-if="lang==0" style="width: 100%;position: fixed;bottom: 0px;left: 0px;height: 60px;background: #fff;font-size:26rpx">
			 <view @click="chushou()" style="width:16%;border-radius: 0.3em;;height: 36px;margin-top:11px;font-size:26rpx;line-height:36px;text-align: center;float: left;margin-left: 30px;border: 1rpx solid #f3f3f3;">
				 出售
			 </view>
			 
			 <view @click="goumai()" style="background: #333;border-radius: 0.3em;color:#fff;width:60%;height: 36px;margin-top:11px;font-size:26rpx;line-height:36px;text-align: center;float: left;margin-left: 30px;border: 1rpx solid #f3f3f3;">
			 			 立即兑换
			 </view>
		 </view>
		 
		 <view v-if="lang==1" style="width: 100%;position: fixed;bottom: 0px;left: 0px;height: 60px;background: #fff;font-size:26rpx">
		 			<!-- <view @click="chushou()" style="width:16%;border-radius: 0.3em;;height: 36px;margin-top:11px;font-size:26rpx;line-height:36px;text-align: center;float: left;margin-left: 30px;border: 1rpx solid #f3f3f3;">
		 				 出售
		 			 </view> -->
		 			 
		 			 <view @click="goumai1()" style="background: #333;border-radius: 0.3em;color:#fff;width:60%;margin-left:20%;height: 36px;margin-top:11px;font-size:26rpx;line-height:36px;text-align: center;float: left;border: 1rpx solid #f3f3f3;">
		 			 			 立即购买
		 			 </view>
		 </view>
		 
		 
		 <view style="width: 100%;height: 120rpx;">
			 
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang:1,
				 info: [],
				 imgList: [
					// {url:'../../static/grid/banner1.png'},
					// {url:'../../static/grid/banner2.png'},
					// {url:'../../static/grid/banner3.png'},
					// {url:'../../static/grid/banner4.png'},
				],
				
				
				
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				
				bannerIndex: 0,
				popupShow: false, // 规格弹框
				
				id: '', // 商品id
				customService: {},
				goodsInfo: {}, // 商品信息
				specData: {},
				
				select_sp_ids: [], // 选择的规格id集合，初始化时赋值为每个规格的第一项
				spGoodsInfo: {}, // 选择规格后的信息
				value: 1, // 购买数量
				handType: 'buy', // 谁吊起的选择规格 
			};
		},
		onLoad(ops) {
			this.id = ops.id;
		},
		onShow(){
			let lang = uni.getStorageSync('lang')
			if(lang){
				this.lang = lang;
	
					this.get_info1();
			}else{
				this.lang = 0
					this.get_info();
			}
		
		},
	
		methods: {
			// 选择规格
			selectSpId(index, id) {
				// console.log(index,id);
				this.select_sp_ids[index] = id
				this.spToGoodsInfo()
			},
			// 根据选择的规格获取商品信息
			spToGoodsInfo() {
				let str = this.select_sp_ids.join('_')
				if (this.specData.spec_list && this.specData.spec_list.length) {
					this.specData.spec_list.forEach(item => {
						if (item.spec_sku_id === str) {
							return this.spGoodsInfo = item
						}
					})
				}
			},
			
			// 获取商品详情
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.get(this.$api.goodsDetails, {
					goods_id: this.id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						this.goodsInfo = res.data.detail
						this.customService = res.data.customService
						this.specData = res.data.specData
						if (!this.select_sp_ids.length && res.data.specData && res.data.specData.spec_attr && res.data.specData.spec_attr.length) {
							let arr = []
							res.data.specData.spec_attr.forEach(item => {
								if (item.spec_items.length) {
									arr.push(item.spec_items[0].item_id)
								}
			
							})
							this.select_sp_ids = arr
							this.spToGoodsInfo()
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 选择完规格
			chooseSuccess() {
			
				if(this.handType == 'car') {
					this.handAddCard()
				} else if(this.handType == 'buy') {
					this.submit()
				} else {
					this.hidePopup()
				}
			},
			// 点击加入购物车 
			handAddCard() {
				if (!this.select_sp_ids.length) return uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post(this.$api.cartAdd, {
					goods_id: this.id,
					goods_num: this.value,
					goods_sku_id: this.spGoodsInfo.goods_spec_id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						this.getDetail()
						this.hidePopup()
						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
						}, 200)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 点击收藏
			handleCollect() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post(this.$api.collectAdd, {
					goods_id: this.id,
					type: '1',
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						this.getDetail()
						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}, 200)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 提交订单
			submit() {
				if (!this.select_sp_ids.length) return uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				let obj = {
					id: this.id,
					title: this.goodsInfo.goods_name ,
					yunfei: this.goodsInfo.ems,
					value: this.value
				}
				uni.navigateTo({
					url: '/pages/home/submitOrder?goods=' + JSON.stringify(obj) + '&spIds=' + JSON.stringify(this.select_sp_ids) + '&spGoodsInfo=' + JSON.stringify(this.spGoodsInfo) + '&spec_attr=' + JSON.stringify(this.specData.spec_attr)
				})
			},
			// 轮播切换
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			
			// 打开规格弹框 
			showPopup: function(type) {
				this.popupShow = true;
				this.handType = type
			},
			// 关闭规格弹框
			hidePopup: function() {
				this.popupShow = false;
			},
			// 数量加减
			change: function(e) {
				this.value = e.value;
			},
			// 去购物车
			handCart() {
				uni.switchTab({
					url: '/pages/tabbar/cart'
				})
			},
			chushou(){
				uni.showToast({
					title: "该商品暂未开放出售",
					icon: 'none'
				})
			},
			goumai2(){
				uni.requestPayment({
				    provider: 'appleiap',
				    orderInfo: {},
				    success: (e) => {
				      //  e 类型为 Transaction, 详见下面的描述
				    }
				})
			},
			goumai1(){	
				
				uni.navigateTo({ url:"/pages/home/submitOrder?id="+this.info.id});
				// this.popupShow = true;
				return;
				
				let platform = uni.getSystemInfoSync().platform;
				if(platform === 'ios'){
					  // 苹果
					uni.showLoading({ title: '正在加载', mask: true });
					var _this = this;
					_this.$api.request('/api/user/wxppay2', {
						tian:this.info.money,
					}, uni.getStorageSync('token'), function(res) {
						console.log(res,888888);
						uni.hideLoading();
						if (res.code == 1) {
							console.log(res.data.data,7777777)
							uni.requestPayment({
								"provider": "appleiap", 
								"orderInfo": res.data,
								success(res) {
									_this.popupClose();	
									uni.showToast({
										title: '支付完成',
										icon: 'none'
									});
									setTimeout(function(){
										_this.get_info();
										//支付完成
										if(_this.time_m){
											clearInterval(_this.time_m)
										}
										_this.renwu();
									},500)
									
								},
								fail(e) {
									console.log(e,"Err")
								}
							})
						}
					});
				} else if(platform === 'android'){
				  // 安卓
					uni.showLoading({ title: '正在加载', mask: true });
					var _this = this;
					_this.$api.request('/api/user/wxppay1', {
						tian:this.info.money,
					}, uni.getStorageSync('token'), function(res) {
						console.log(res,888888);
						uni.hideLoading();
						if (res.code == 1) {
							console.log(res.data,7777777)
							uni.requestPayment({
								"provider": "wxpay", 
								"orderInfo": res.data,
								success(res) {
									_this.popupClose();	
									uni.showToast({
										title: '支付完成',
										icon: 'none'
									});
									setTimeout(function(){
										_this.get_info();
										//支付完成
										if(_this.time_m){
											clearInterval(_this.time_m)
										}
										_this.renwu();
									},500)
									
								},
								fail(e) {}
							})
						}
					});
				} else {
				  // 其他
				}				
				
				
			
			},
			goumai(){
				uni.showToast({
					title: "未完成拼图",
					icon: 'none'
				})
			},
			get_info(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopDea', {id:_this.id}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
					
						let richtext =  res.data.content;
						const regex = new RegExp('<img', 'gi');
						richtext = richtext.replace(regex,'<img style="width: 100%;"');
						//再不济，加上这个
						const regex1 = new RegExp('data-fail="0" style="', 'gi');
						richtext = richtext.replace(regex1,'data-fail="0" style="width: 100%;');
						 res.data.content = richtext
					
						_this.info = res.data;
						_this.imgList = res.data.img_arr;
						
						
					}
					uni.hideLoading();
				});
			},
			get_info1(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopDea1', {id:_this.id}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
					
						let richtext =  res.data.content;
						const regex = new RegExp('<img', 'gi');
						richtext = richtext.replace(regex,'<img style="width: 100%;"');
						//再不济，加上这个
						const regex1 = new RegExp('data-fail="0" style="', 'gi');
						richtext = richtext.replace(regex1,'data-fail="0" style="width: 100%;');
						 res.data.content = richtext
					
						_this.info = res.data;
						_this.imgList = res.data.img_arr;
						
						
					}
					uni.hideLoading();
				});
			},
			
		}
	};
</script>

<style lang="scss">
	page{
		min-height: 100vh;
		background:#f3f3f3
	}
	.shop_dea{

	}
	
	
	.tuwen-bg {
		position: absolute;
		left: 30rpx;
		top: 44%;
		z-index: 1;
		width: 140rpx;
		height: 20rpx;
		background-color: #f35244;
	
	}
	
	.tui-col-7 {
		width: 58.33333333%;
	}
	
	.tui-col-5 {
		width: 41.66666667%;
	}
	
	.tui-operation {
		width: 100%;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}
	
	.tui-opacity {
		opacity: 0.5;
	}
	
	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}
	
	.tui-operation-right {
		height: 100rpx;
		padding: 0 12rpx;
		box-sizing: border-box;
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-flex-1 {
		flex: 1;
		padding: 6rpx;
	}
	
	/*底部操作栏*/
	
	/*底部选择弹层*/
	
	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
		position: fixed;
		top:20%;
		background: #f1f1f1;
	}
	
	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	/* .tui-popup-btn .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	} */
	
	/* .tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	} */
	
	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}
	
	.tui-popup-img {
		height: 220rpx;
		width: 220rpx;
		border-radius: 24rpx;
		display: block;
	}
	
	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}
	
	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}
	
	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}
	
	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}
	
	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}
	
	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}
	
	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}
	
	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		// border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}
	
	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}
	
	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		// border-radius: 40rpx;
		left: 0;
		top: 0;
	}
	
	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}
	
	/*底部选择弹层*/
</style>
